<template>
  <div class="views_BOX from_masrgin_box fontPRPS">
    <!-- 查询 -->
    <div class="BOX_nav">
      <ul class="FSC">
        <li :class="['navTabItem',{'navTabItemChoose':orderType==1}]" @click="orderType = 1">售中退款</li>
        <li :class="['navTabItem',{'navTabItemChoose':orderType==2}]" @click="orderType = 2">售后退款</li>
      </ul>
      <el-form :model="queryList" :inline="true" class="FSBC">
        <el-form-item label="申请时间:" class="widthL">
          <el-date-picker v-model="queryList.selectDate" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <div>
          <el-form-item class="widthS">
            <el-select v-model="queryList.selectKey" placeholder="订单编号">
              <el-option v-for="item in selectKeyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <span class="lineHeight-52">：</span>
          <el-form-item class="widthL">
            <el-input v-model="queryList.selectKeyValue" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="处理状态:" class="widthM">
          <el-select v-model="queryList.status">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台介入:" class="widthM">
          <el-select v-model="queryList.intervention">
            <el-option v-for="item in interventionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItemBtn">
          <el-button @click="searchClick" class="baseBut bg_base">查询</el-button>
          <el-button @click="resetClick" class="baseBut bg_gray">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据列表 -->
    <div class="BOX_main">
      <vue-scroll ref="orderListVs" :ops="$store.state.ops">
        <div class="BOX_main_table">
          <ul class="FSC">
            <li :class="['tabItem',{tabItemChoose:queryList.tableSelect==1}]" @click="queryList.tableSelect = 1">待处理</li>
            <li :class="['tabItem',{tabItemChoose:queryList.tableSelect==2}]" @click="queryList.tableSelect = 2">已处理</li>
          </ul>
          <!-- 表头 -->
          <ul class="table_hd">
            <li class="table_header FSBC">
              <div class="table_li_F">售后商品</div>
              <div class="table_li">退款金额</div>
              <div class="table_li">买家</div>
              <div class="table_li">申诉时间</div>
              <div class="table_li">商家处理</div>
              <div class="table_li">平台介入</div>
              <div class="table_li">操作</div>
            </li>
          </ul>
          <!-- 列表 -->
          <ul>
            <li class="table_list" v-for="(orderGoods, index) in list" :key="index">
              <!-- 订单基础信息 -->
              <div class="table_list_nav">
                <div class="table_list_nav_lf">
                  <span class="table_list_nav_lf_item">退款编号：{{orderGoods.refundId}}</span>
                  <span class="table_list_nav_lf_item">订单号：{{orderGoods.OrderId}}</span>
                  <span class="table_list_nav_lf_item">{{orderGoods.shopName}}</span>
                </div>
                <div class="table_list_nav_lr" @click="getOrderDetal(orderGoods.OrderId)">订单详情</div>
              </div>
              <!-- 订单详情 -->
              <div class="table_item_detail FSBC">
                <div class="table_li_F">
                  <div class="tableItemGoods FCC" v-for="(item, ind) in orderGoods.goodsList" :key="ind">
                    <img class="listGoodsImg" :src="item.picPath" alt />
                    <div class="listGoodsTitle FAIC">{{item.title}}</div>
                  </div>
                </div>
                <div class="table_li">
                  <div class="color_bsae">{{orderGoods.refundPrice}}</div>
                  <div>{{orderGoods.refundStatus | refundStatusFil}}</div>
                </div>
                <div class="table_li">
                  <span>{{orderGoods.receiver}}</span>
                  <span>{{orderGoods.receiverMobile}}</span>
                </div>
                <div class="table_li">
                  <span>{{orderGoods.createTime | dateYMDFil}}</span>
                  <span>{{orderGoods.createTime | dateHFSFil}}</span>
                </div>
                <div class="table_li">{{orderGoods.shopStatus | shopStatusFil}}</div>
                <div class="table_li">{{orderGoods.platformStatus | platformStatusFil}}</div>
                <div class="table_li">
                  <el-button
                    class="baseBut bg_base w_80"
                    type="primary"
                    @click="btnClick(orderGoods)"
                  >{{orderGoods.shopStatus | btnFill}}</el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </vue-scroll>
    </div>
    <!-- 分页 -->
    <div class="BOX_page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.pageNo"
        :page-size="queryList.size"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryList.total"
      ></el-pagination>
    </div>
    <!-- 售中查看 -->
    <checkOrderSale :showTrue='checkOrderSale' :orderData='dialogInfo' @close='checkOrderSale=false' @submit ='checkOrderSale=false'></checkOrderSale>
    <checkOrderAfter :showTrue='checkOrderAfter' :orderData='dialogInfo' @close='checkOrderAfter=false' @submit ='checkOrderAfter=false'></checkOrderAfter>
    <handleOrder :showTrue='handleOrder' :orderData='dialogInfo' @close='handleOrder=false' @submit ='submithandleOrder'></handleOrder>
    <receiptOrder :showTrue='receiptOrder' :orderData='dialogInfo' @close='receiptOrder=false' @submit ='receiptOrder=false'></receiptOrder>
    <confirmRefund :showTrue='confirmRefund' :orderData='dialogInfo' @close='confirmRefund=false' @submit ='confirmRefund=false'></confirmRefund>
  </div>
</template>
<script>
import { orderList, sellerHandleOrder } from "../../../../requestApi/order/afterOrder";
import checkOrderSale from './dialog/checkOrderSale'
import checkOrderAfter from './dialog/checkOrderAfter'
import handleOrder from './dialog/handleOrder'
import receiptOrder from './dialog/receiptOrder'
import confirmRefund from './dialog/confirmRefund'
export default {
  components: {
    checkOrderSale,
    checkOrderAfter,
    handleOrder,
    receiptOrder,
    confirmRefund
    },
  data() {
    return {
      checkOrderSale:false, // 查看售中
      checkOrderAfter:false, // 查看售后
      handleOrder:false, // 处理
      confirmRefund:false, // 售后退款
      receiptOrder:false, // 售后编辑
      orderType:'1', // 订单类型 1,售中订单 2,售后订单
<<<<<<< HEAD
      pagesTotal: null, // 数据总长度
      selectDate: [], // 申请退款时间
      selectKey: '0', // 查询字段
      selectKeyValue:'', // 查询内容
      // 列表请求参数
=======
>>>>>>> a8ee6ef4d7fb3ef375636a25da568b77d570fc5c
      queryList: {
        pageNo: 1, // 页码
        pageSize: 10, // 页面数量
        grade: 2, // 设置级别: 1运营 2商户 3用户
        // grade: sessionStorage.getItem('grade'), // 设置级别: 1运营 2商户 3用户
        orderStatus:'0', // 0代表售中 1代表售后 
        orderId:'', // 订单id;
        refundId:'', // 退款单号;
        startDate:'', // 用户申请退款时间-开始
        endDate:'', // 用户申请退款时间-结束
        disposeStatus :'', // 处理状态 0等待审核 1同意退款 2不同意退款 3 等待退款 4 等待退货
        buyName :'', // 买家名称
        nickName :'', // 店铺名称 
        platformIn :'', // 平台是否介入 0不介入 1介入
        shopDispose :'', // 商家是否处理 0待处理 1已处理 
        safeguardingRights :'0', // 是否维权 0-未维权 1-维权(售中售后-0/维权订单页面-1)
        safeguardingStartDate :'', // 维权开始时间 
        safeguardingEndDate :'', // 维权结束时间
        platformDispose :'', // 平台是否处理 0待处理 1已处理
      },
      selectKeyList:[
        { value: '0',label: '订单编号'}, 
        { value: '1',label: '退款编号'}, 
        { value: '2',label: '买家名'}, 
        { value: '3',label: '店铺名'}, 
      ],
      statusList:[
        { value: '0',label: '等待审核'}, 
        { value: '1',label: '同意退款'}, 
        { value: '2',label: '不同意退款'}, 
        { value: '3',label: '等待退货'}, 
        { value: '4',label: '等待退款'}, 
      ],
      interventionList:[
        { value: '0',label: '全部'}, 
        { value: '1',label: '已介入'}, 
        { value: '2',label: '未介入'}, 
      ],
      list: [
        {
          refundId:'TKBH156202002021459',
          OrderId:'977929952244519958',
          shopName:'伯图旗舰店',
          refundPrice:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          applyRefundTime:'1589425524000',
          sellerHandle:'0',
          platformHandle:null,
          applyType:'1',
          picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
          title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            },
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
        {
          refundId:'111',
          orderId:'111111111',
          shopName:'伯图旗舰店',
          refundFee:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          applyRefundTime:'1589425524000',
          sellerHandle:'1',
          platformHandle:'1',
          applyType:'1',
          picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
          title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            },
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
        {
          refundId:'TKBH156202002021459',
          OrderId:'977929952244519958',
          shopName:'伯图旗舰店',
          refundPrice:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          createTime:'1589425524000',
          shopStatus:'2',
          platformStatus:'2',
          refundStatus:'2',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
        {
          refundId:'TKBH156202002021459',
          OrderId:'977929952244519958',
          shopName:'伯图旗舰店',
          refundPrice:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          createTime:'1589425524000',
          shopStatus:'3',
          platformStatus:'3',
          refundStatus:'3',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
        {
          refundId:'TKBH156202002021459',
          OrderId:'977929952244519958',
          shopName:'伯图旗舰店',
          refundPrice:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          createTime:'1589425524000',
          shopStatus:'4',
          platformStatus:'4',
          refundStatus:'1',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
        {
          refundId:'TKBH156202002021459',
          OrderId:'977929952244519958',
          shopName:'伯图旗舰店',
          refundPrice:'888.88',
          receiver:'啊呀',
          receiverMobile:'17800001111',
          createTime:'1589425524000',
          shopStatus:'5',
          platformStatus:'5',
          refundStatus:'2',
          goodsList:[
            {
              picPath:'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1590045041&t=8224a0db426dcafd07d1bf61283df7fd',
              title:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子50学生党军训',
            }
          ]
        },
      ],
      dialogInfo:{}
    };
  },
  created: function() {},
  mounted() {
    // this.listFun();
  },
  computed: {},
  methods: {
    // 按钮操作
    btnClick(data){
      this.dialogInfo = data
      if (data.sellerHandle == 0) {
        this.handleOrder = true
      } else if(data.shopStatus == 4){
        this.receiptOrder = true
      } else if(data.shopStatus == 5){
        this.confirmRefund = true
      } else{
        if(this.orderType == 1){ // 售中
          this.checkOrderSale = true
        }else{ // 售后
          this.checkOrderAfter = true
        }
      }
    },
    // 提交订单处理
    async submithandleOrder(val){
      console.log(val);
      let self = this
      let params = {
        refundId:val.refundId,
        sellerHandle:val.sellerHandle,
        sellerHandleRemark:val.sellerHandleRemark
      }
      let res = await sellerHandleOrder(params);
      if (res.status == 200 && res.data) {
        self.handleOrder=false
      } else {
        self.$message({
          type: "error",
          message: '处理失败'
        });
      }
    },
    // 查看详情
    getOrderDetal(id){
      this.$router.push('detail')
    },
    // 重置筛选
    resetClick() {
      this.queryList = {
        pageNo: 1,
        pageSize: 10,
        total: null,
      };
      this.list = [];
      this.queryListFun();
    },
    // 筛选查询
    searchClick() {
      this.list = [];
      this.queryList.pageNo = 1;
      this.queryListFun();
    },
    // 分页
    handleCurrentChange(val) {
      this.queryList.pageNo = val;
      this.queryListFun();
    },
    handleSizeChange(val){
      this.queryList.pageSize = val;
      this.queryListFun();
    },
    // 初始查询列表
    async listFun() {
      await this.queryListFun();
    },
    // 查询请求
    async queryListFun() {
      let self = this;
      let params = {
        ...self.queryList
      };
      let res = await MembershipPageList(params);
      if (res.statusCode == "200") {
        let data = res.data;
        self.queryList.total = Number(data.total);
        self.list = data.records;
        self.$nextTick(() => {
          self.$refs["orderListVs"].scrollTo(
            {
              y: "0%"
            },
            300
          );
        });
      } else {
        this.$message({
          type: "error",
          message: res.statusMessage
        });
      }
    }
  },
  filters: {
    shopStatusFil(val){
      if (val == 1) {
          return "等待审核";
      } else if (val == 2) {
          return "不同意";
      } else if (val == 3) {
          return "同意退款";
      } else if (val == 4) {
          return "等待退货";
      } else if (val == 5) {
          return "等待退款";
      }
    },
    btnFill(val){
      if (val == 1) {
          return "处理";
      } else if (val == 2) {
          return "查看";
      } else if (val == 3) {
          return "查看";
      } else if (val == 4) {
          return "收货";
      } else if (val == 5) {
          return "退款";
      }
    },
    refundStatusFil(val){
      if (val == 1) {
        return "仅退款";
      } else if (val == 2) {
        return "退货退款";
      }
    },
    platformStatusFil(val){
      if (val == 1) {
          return "无";
      } else if (val == 2) {
          return "待处理";
      } else if (val == 3) {
          return "处理中";
      } else if (val == 4) {
          return "同意申诉";
      } else if (val == 5) {
          return "完成退款";
      } else if (val == 6) {
          return "不同意";
      } 
    },
  },
  watch: {}
};
</script>
<style scoped>
/* 整体布局 */
  .BOX_nav {
    min-height: 62px;
    width: calc(100% - 30px);
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    overflow: hidden;
    flex-wrap: wrap;
  }
  .BOX_main {
    height: calc(100% - 238px);
    overflow: hidden;
    background-color: #fff;
  }
  .BOX_page {
    width: 100%;
    /* height: 108px; */
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
/* 顶部筛选 */
  .navTabItem{
    margin: 10px 40px 10px 0;
    font-size:16px;
    font-weight:400;
    line-height:22px;
    padding-bottom: 5px;
    color: rgba(45,55,62,1);
    border-bottom: 2px solid rgba(235,68,38,0);
  }
  .navTabItemChoose{
    font-weight:500;
    color:rgba(235,68,38,1);
    border-bottom: 2px solid rgba(235,68,38,1);
  }
  .widthL .el-input,
  .widthL .el-date-editor{
    width: 454px;
  }
  .widthM .el-select{
    width: 306px;
  }
  .widthS .el-select{
    width: 100px;
  }
  .el-form-item{
    margin: 5px 0;
  }
  .lineHeight-52{
    line-height: 52px;
  }

/* 表格 */
  .BOX_main_table {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
  }
  /* 表格筛选 */
    .tabItem{
      margin: 16px 40px 16px 0;
      font-size:14px;
      font-weight:400;
      color:rgba(45,55,62,1);
    }
    .tabItemChoose{
      color:rgba(235,68,38,1);
      font-weight:500;
    }
  /* 列表数据 */
    .table_list {
      width: 100%;
      margin-top: 10px;
      border: 1px solid rgba(238, 240, 245, 1);
    }
  /* 基础信息 */
    .table_list_nav {
      height: 36px;
      background: rgba(245, 246, 250, 1);
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table_list_nav_lf {
      font-size: 14px;
      font-weight: 400;
      color: rgba(45, 55, 62, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .table_list_nav_lf_item {
      margin-left: 16px;
      margin-right: 24px;
    }
    .table_list_nav_lr {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 94, 41, 1);
      margin-right: 20px;
    }
  /* 详情 */
    .tableItemGoods{
      margin-top: 15px;
    }
    .table_li_F,.table_li {
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }
    .table_header {
      width: 100%;
      height: 48px;
      background: rgba(255, 239, 234, 1);
      border: 1px solid rgba(255, 215, 203, 1);
      font-size: 14px;
      font-weight: 500;
      color: rgba(45, 55, 62, 1);
      line-height: 48px;
    }
    .table_hd {
      height: 48px;
      width: 100%;
      display: table;
    }

    .table_item_detail{
      width: 100%;
      padding-bottom: 15px;
    }
    .table_li_F{
      width: calc(100% - 660px) !important;
      max-width: 500px;
    }
    .table_li{
      width: 110px;
    }
    .listGoodsTitle {
      width: calc(100% - 120px);
      max-height: 48px;
      font-size:14px;
      font-weight:400;
      color:rgba(45,55,62,1);
      line-height:22px;
      margin-left: 20px;
      display: -webkit-box; 
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; 
      overflow: hidden;
    }
    .listGoodsImg{
      width: 80px;
      height: 80px;
      background: rgba(216, 216, 216, 1);
      margin-left: 20px;
    }
</style>
